{% extends "layout.html" %}
<!-- 新增：导入 Markdown 渲染JS（前端渲染更简单，也可后端渲染） -->
{% block head %}
    {{ super() }}
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        /* TXT 格式保留换行和空格 */
        .txt-content {
            white-space: pre-wrap;
            font-family: monospace;
            line-height: 1.6;
        }
        /* Markdown 格式样式 */
        .md-content h1, .md-content h2, .md-content h3 {
            margin: 1.5rem 0 1rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 0.5rem;
        }
        .md-content ul, .md-content ol {
            margin: 1rem 0;
            padding-left: 2rem;
        }
        .md-content code {
            background: #f4f4f4;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
        }
    </style>
{% endblock head %}

{% block content %}
  <article class="media content-section">
    <img class="rounded-circle article-img" src="{{ url_for('static', filename='profile_pics/' + post.author.image_file) }}">
    <div class="media-body">
      <div class="article-metadata">
        <a class="mr-2" href="{{ url_for('users.user_posts', username=post.author.username) }}">{{ post.author.username }}</a>
        <small class="text-muted">{{ post.date_posted.strftime('%Y-%m-%d %H:%M:%S') }}</small>
        <!-- 显示文章格式 -->
        <small class="text-muted ml-3">Format: {{ post.content_format | upper }}</small>
        {% if post.author == current_user %}
          <div class="mt-2">
            <a class="btn btn-secondary btn-sm mt-1 mb-1" href="{{ url_for('posts.update_post', post_id=post.id) }}">Update</a>
            <button type="button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteModal">Delete</button>
          </div>
        {% endif %}
      </div>
      <h2 class="article-title">{{ post.title }}</h2>
      <!-- 按格式渲染内容 -->
      {% if post.content_format == 'txt' %}
          <div class="article-content txt-content">{{ post.content }}</div>
      {% elif post.content_format == 'markdown' %}
          <div class="article-content md-content">{{ post.rendered_content|safe }}</div>
      {% elif post.content_format == 'docx' %}
          <div class="article-content txt-content">{{ post.content }}</div>
      {% endif %}
    </div>
  </article>

  <!-- 删除确认弹窗 -->
  <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteModalLabel">Delete Post?</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Are you sure you want to delete this post? This action cannot be undone.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <form action="{{ url_for('posts.delete_post', post_id=post.id) }}" method="POST">
            <input class="btn btn-danger" type="submit" value="Delete">
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增：Markdown 前端渲染脚本 -->
  {% if post.content_format == 'markdown' %}
  <script>
    // 将 Markdown 转为 HTML 并插入容器
    const mdContent = document.getElementById('md-container').textContent;
    document.getElementById('md-container').innerHTML = marked.parse(mdContent);
  </script>
  {% endif %}
{% endblock content %}